/**
 * @Author: jipeng.Li
 * @Date: 2021-04-13 11:48:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-13 11:48:21
 * @Description: 加油授权
 */

import React from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Switch
} from 'react-native';
import {
  fontColorBlack,
  fontColorCoffee,
  fontColorDeepGray,
  fontColorLightGray,
  mainBgColorBlack,
  mainBgColorLightGray,
  mainBgColorWhite,
  priceColor,
  px2dp
} from '@/styles';
import { iconRightGray02 } from '@/images';

export function UserInfoCell({ title, value }) {
  return (
    <View style={styles.userInfoCell}>
      <View style={styles.userInfoCellTitle}>
        <Text style={styles.userInfoCellTitleText}>{title}</Text>
      </View>
      <View style={styles.userInfoCellValue}>
        <Text style={styles.userInfoCellValueText}>{value}</Text>
      </View>
    </View>
  );
}

export function DateTimePickerCell({ deadline, onClick }) {
  return (
    <View style={styles.userInfoCell}>
      <View style={styles.userInfoCellTitle}>
        <Text>
          <Text style={styles.userInfoCellTitleText}>截止日期</Text>
          <Text style={{ color: priceColor }}>*</Text>
        </Text>
      </View>
      <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => onClick && onClick()}
        style={{ flex: 1 }}
      >
        <Text style={{ fontSize: px2dp(28), color: deadline ? fontColorBlack : fontColorLightGray }}>
          {deadline || '无截止日期'}
        </Text>
      </TouchableOpacity>
      <Image
        source={iconRightGray02}
        style={{
          width: px2dp(28),
          height: px2dp(28)
        }}
      />
    </View>
  );
}

export function IsLimitInputCell(props) {
  const { isLimit, limitValue, switchChange, textChange, title = '', noLimitText = '', placeholder = '', unit = '' } = props;
  return (
    <View style={styles.userInfoCell}>
      <View style={{ width: px2dp(140) }}>
        <Text style={{ fontSize: px2dp(28), color: '#686764' }}>{title}</Text>
      </View>
      {
        !isLimit ? (
          <Text style={styles.limitText}>
            {noLimitText}
          </Text>
        ) : (
          <View style={styles.limitInput}>
            <TextInput
              style={styles.limitInputText}
              placeholder={placeholder}
              placeholderTextColor={fontColorLightGray}
              multiline
              maxLength={11}
              value={limitValue}
              underlineColorAndroid='transparent'
              keyboardType='numeric'
              onChangeText={number => textChange && textChange(number)}
            />
            <Text style={styles.limitInputUnit}>{unit}</Text>
          </View>
        )
      }
      <Switch
        trackColor={{
          false: '#E6E6E5',
          true: fontColorCoffee,
        }}
        ios_backgroundColor='#E6E6E5'
        value={isLimit}
        onValueChange={value => switchChange && switchChange(value)}
        testID='one'
        thumbColor={mainBgColorWhite}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  userInfoCell: {
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#F0F0EF',
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(102)
  },
  userInfoCellTitle: {
    width: px2dp(140)
  },
  userInfoCellTitleText: {
    fontSize: px2dp(28),
    color: '#686764'
  },
  userInfoCellValue: {
    flex: 1
  },
  userInfoCellValueText: {
    fontSize: px2dp(28),
    color: fontColorBlack
  },
  limitText: {
    flex: 1,
    color: '#CDCCC9',
    fontSize: px2dp(28),
  },
  limitInput: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  limitInputText: {
    flex: 1,
    color: mainBgColorBlack,
    fontSize: px2dp(28),
    padding: 0
  },
  limitInputUnit: {
    fontSize: px2dp(28),
    color: '#999793'
  }
});
